<route lang="json5" type="page">
  {
    layout: 'default',
    style: {
      navigationBarTitleText: '成绩详情',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import { getScoreDetail } from '@/apis/score'

const id = ref('')
const loading = ref(false)
const summary = ref()

const getDetail = async () => {
  summary.value = await getScoreDetail(id.value)
}
onLoad((options) => {
  if (options.id) {
    loading.value = true
    id.value = options.id
    console.log('option = ', options)
    getDetail()
  }
  loading.value = false
})
</script>

<template>
  <view class="container">
    <view class="cover flex-row-between-center flex-col text-center color-white">
      <text class="title1 text-bold">
        秉学工作室
      </text>
      <view>
        <text class="title2 text-bold">
          诊 断 报 告
        </text>
        <view class="line" />
        <text class="title3">
          DIAGNOSIS REPORT
        </text>
        <view class="title4 text-bold margin-top-xl">
          {{ summary.exam.name }}
        </view>
        <view class="margin-top">
          <text class="title5 text-bold">
            {{ summary.studentName }}
          </text>
        </view>
      </view>
      <view>
        <view class="margin-top">
          向上滑动查看详情
        </view>
        <wd-icon name="up" color="#fff" size="48" />
      </view>
    </view>

    <view id="detail" class="detail">
      <wd-card :margin="['32rpx', '32rpx']" title="我的成绩总览">
        <wd-row>
          <wd-col :span="12">
            <view class="item text-center">
              <view class="item-value text-bold">
                <text class="color-orange">
                  {{ summary.totalScore || '--' }}
                </text>
                <text class="text-lg color-blue">
                  /{{ summary.exam.totalScore || '--' }}
                </text>
              </view>
              <view class="title">
                我的分数
              </view>
            </view>
          </wd-col>
          <wd-col :span="12">
            <view style="" class="item text-center">
              <view class="item-value text-bold">
                <text class="color-orange">
                  {{ summary.rank || '--' }}
                </text>
                <text class="text-lg color-blue">
                  /{{ summary.exam.studentCount || '--' }}
                </text>
              </view>
              <view class="title">
                排名
              </view>
            </view>
          </wd-col>
          <wd-col :span="12">
            <view class="item text-center">
              <view class="item-value text-bold color-blue">
                {{ summary.exam.highestScore || '--' }}
              </view>
              <view class="title">
                最高分数
              </view>
            </view>
          </wd-col>
          <wd-col :span="12">
            <view class="item text-center">
              <view class="item-value text-bold color-blue">
                {{ summary.exam.averageScore || '--' }}
              </view>
              <view class="title">
                平均分数
              </view>
            </view>
          </wd-col>
        </wd-row>
      </wd-card>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    width: 100%;
    height: 100%;
  }

  .container {
    height: 100%;
    position: relative; // 确保父容器有定位
  }

  .cover {
    width: 100vw;
    height: 100vh;
    background-image: url('@/static/images/exam-report.png');
    background-size: cover;
    padding: 24rpx 0 72rpx 0;

    .title1 {
      font-size: 56rpx;
    }

    .title2 {
      font-size: 96rpx;
      word-spacing: 18rpx;
    }

    .line {
      border-top: 2rpx;
      border-color: white;
      border-style: solid;
      margin: 0 24rpx;
    }

    .title3 {
      font-size: 48rpx;
      word-spacing: 24rpx;
    }

    .title4 {
      font-size: 48rpx;
      white-space: nowrap;
    }

    .title5 {
      border: 4rpx solid white;
      border-radius: 48rpx;
      padding: 2rpx 78rpx;

      font-size: 48rpx;
    }
  }

  .detail {
    width: 100%;
    background-color: #f1f4fa;

    padding: 64rpx 0;
  }

  .item {
    margin: 18rpx;
  }

  .item-value {
    font-size: 64rpx;
  }

  .text-bold {
    font-weight: bold;
  }

  .margin-top {
    margin: 30rpx;
  }

  .margin-top-xl {
    margin: 50rpx;
  }
</style>
